<template>
        <div class="list">
            <div class="title"> 评论墙</div>
            <ul>
                <li v-for="item in lists" :key="item.id">
                    <b>{{item.name}}</b>:
                    <b>{{item.content}}</b>
                    <button @click="del(item.id)">删除</button>
                </li>
            </ul>
    </div>
</template>
<script>
    import * as api from '../../api/index'
    export default {
        data(){
            return {
                lists: []
            }
        },
        mounted(){
            api.getComment().then(res=>{
                // console.log(res);
                this.lists = res.data.data
                console.log(this.lists);
            }),
            this.$bus.$on("comList", listArr=>{
                this.lists=listArr
                console.log(this.lists);
            })
        },
        methods:{
            del(id){
                let con =  window.confirm('是否确认删除')
                if(con){
                    api.delComment(id).then(res=>{
                        console.log(res);
                        api.getComment().then(res=>{
                            this.lists = res.data.data
                        })
                    })
                }else{
                    alert('已取消删除')
                }
            }
        }
    }
</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        border: 1px solid black;
        padding:0 20px;
        height: 50px;
        line-height: 50px;
    }
    .title{
        text-align: center;
        width: 100%;
        font-size: 30px;
        color: #fff;
        background: rgb(25, 154, 214);
    }
    .list{
        width: 500px;
        min-height: 500px;
        border: 1px solid black;
    }
    button{
        float: right;
        width: 60px;
        margin-top: 15px;
    }
</style>